<template>
  <div>
    <el-table v-if="istable" :data="tableData" style="width: 100%" >
      <el-table-column label="资产项目" prop="projectName" class-name="bg-color-82DEB5" header-align="left" align="left"> </el-table-column>

      <el-table-column label="财年" class-name="bg-color-82DEB5" header-align="left" align="left">
        <template slot-scope="scope"> {{ scope.row.fiscalYear }} </template>
      </el-table-column>

      <el-table-column label="状态" class-name="bg-color-82DEB5" header-align="left" align="left">
        <template slot-scope="scope"> {{ scope.row.planDescStatus }} </template>
      </el-table-column>

      <el-table-column label="操作" width="100" header-align="center" align="center">
        <template slot-scope="scope">
          <el-button @click="handleView(scope.row)" type="text" size="small">点击查看</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="发起计划编制" :visible.sync="dialog.visible" width="70%" :close-on-click-modal="false">
      <el-form ref="dialogForm" :model="dialog.model" :rules="dialog.rules" label-width="200px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="计划财年" prop="planYear">
              <el-date-picker value-format="yyyy" v-model="dialog.model.planYear" type="year" :readonly="dialog.type == 'update'" placeholder="请选择"> </el-date-picker>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12">
            <el-form-item label="项目计划编制提交时间" prop="projectSubmitDate">
              <el-date-picker v-model="dialog.model.projectSubmitDate" type="date" :readonly="dialog.type == 'update'" placeholder="请选择"> </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商管计划编制完成时间" prop="businessManageFinishDate">
              <el-date-picker v-model="dialog.model.businessManageFinishDate" type="date" :readonly="dialog.type == 'update'" placeholder="请选择"> </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="集团计划编制完成时间" prop="groupFinishDate">
              <el-date-picker v-model="dialog.model.groupFinishDate" type="date" :readonly="dialog.type == 'update'" placeholder="请选择"> </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="编制说明">
              <el-input type="textarea" :autosize="{ minRows: 3, maxRows: 6 }" placeholder="请输入表单说明" v-model="dialog.model.composeDesc" :readonly="dialog.type == 'update'" maxlength="100" show-word-limit></el-input>
            </el-form-item>
          </el-col> -->
        </el-row>
      </el-form>
      <el-row type="flex" :justify="'end'" v-if="dialog.type != 'update'">
        <el-button type="primary" size="small" @click="saveDialog">启动</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>
<script>
import { getMenuList } from '@/api';
import Api from '../../../api/incomeAndExpenditurePlan';
export default {
  props: {
    tableData: {
      type: Array,
      default: () => {
        return [];
      },
    },
     istable: {
      type: Boolean,
      default: true
    },
  },
  data() {
    return {
      dialog: {
        visible: false,
        type: '',
        model: {
          planYear: '',
          projectSubmitDate: '',
          businessManageFinishDate: '',
          groupFinishDate: '',
          composeDesc: '',
        },
        rules: {
          planYear: [{ required: true, message: '请选择计划财年', trigger: 'blur' }],
          projectSubmitDate: [{ required: true, message: '请选择项目计划编制提交时间', trigger: 'blur' }],
          businessManageFinishDate: [{ required: true, message: '请选择商管计划编制完成时间', trigger: 'blur' }],
          groupFinishDate: [{ required: true, message: '请选择集团计划编制完成时间', trigger: 'blur' }],
        },
      },
    };
  },
  methods: {
    async handleView(item) {
      let res = await getMenuList({
        planYear: this.planYear,
        parentId: this.$route.query.menuId,
        likeDescription: item.planDescStatus == '编制中' ? '0' : '1',
      });
      // let year = item.fiscalYear.substring(0, 4);
      let menuUrl = res.rows[0].menuUrl;
      let separator = menuUrl.indexOf('?') > -1 ? '&' : '?';
      let queryData = {
        isRefresh: true,
        parentMenuId: this.$route.query.menuId,
        menuId: res.rows[0].primaryKey,
        type: item.planType,
        likeDescription: item.planType == '1' ? '0' : '1',
        planKey: item.primaryKey,
        projectKey: item.projectKey,
      };

      let paramData = [];
      for (let key in queryData) {
        paramData.push(key + '=' + queryData[key]);
      }

      let href = menuUrl + separator + paramData.join('&');
      window.open(href);
    },
    editItem(type = 'create', model) {
      if (this.dialog.visible) {
        this.$refs.dialogForm.clearValidate();
      }
      this.dialog.type = type;
      // if (model) {
      //   this.dialog.model = {
      //     ...this.dialog.model,
      //     ...model,
      //   };
      // } else {
      this.dialog.model = {
        planYear: '',
        projectSubmitDate: '',
        businessManageFinishDate: '',
        groupFinishDate: '',
        composeDesc: '',
      };
      // }
      this.dialog.visible = true;
    },
    saveDialog() {
      this.$refs.dialogForm.validate(async isThrough => {
        if (isThrough) {
          const res = await Api.initiatePlanning({
            ...this.dialog.model,
            // planYear: parseInt(this.dialog.model.planYear) + 1 + '',
            planYear: this.dialog.model.planYear,
          });
          if (res && res.success) {
            this.$message.success(res.message);
            this.dialog.visible = false;
            this.$emit('updateList');
          }
        }
      });
    },
  },
};
</script>